<!--
 * @Author: siwen
 * @FilePath: src/views/Dashboard/WellsCompare.vue
 * @Description: WellsCompare.vue
-->
<template>
  <div class="wells-compare echart-dashbaord">
    <el-row>
      <el-select v-model="well" placeholder="选择井">
        <el-option v-for="it in options" :key="'e1_' + it.value" :label="it.label" :value="it.value"> </el-option>
      </el-select>
      <el-button type="primary" @click="drawEchart">确定</el-button>
    </el-row>
    <div ref="chart" class="echart-container"></div>
  </div>
</template>

<script>
import chart_mixin from "./chart-mixin.js"
import getOptions from "./wells.js"
export default {
  name: "WellsCompare",
  mixins: [chart_mixin],
  data() {
    return {
      well: null,
      chart: null,
      options: [
        { label: "井1", value: "well1" },
        { label: "井2", value: "well2" },
        { label: "井3", value: "well3" },
        { label: "井4", value: "well4" }
      ]
    }
  },
  mounted() {
    this.$nextTick().then(this.initialize).then(this.drawEchart)
  },
  methods: {
    drawEchart() {
      this.$nextTick(this.renderEchart)
    },
    renderEchart() {
      const option = getOptions(this.chart)
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.echart-dashbaord {
  padding: 1rem;
}
.echart-container {
  width: 100%;
  min-height: 600px;
}
</style>
